<!-- 查看商铺 -->
<template>
	<div class="lookshop">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>交易中心</el-breadcrumb-item>
            <el-breadcrumb-item>资产招租</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path: '/shopmanage'}">商铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>查看商铺</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="basicinfo">
	        <p>基础信息</p>
	        <ul>
	            <li>*楼盘名称：{{lookData.devName}}</li>
	            <li>
	                <span style="width: 500px;">*城市区域：{{lookData.tradingCode}}</span>
	            </li>
	            <li>
	                <span>*详细地址：{{lookData.detailedAddress}}</span>
	            </li>
	            <li>
	                <span style="width: 500px;">*类型：{{lookData.type}}</span>
	                <span v-if="lookData.propertyFee != undefined">物业费：{{lookData.propertyFee}}元/㎡.月</span>
	                <span v-else>物业费：</span>
	            </li>
	            <li>物业公司：{{lookData.propertyCompany}}</li>
	            <li>*交通配套：<p>{{lookData.trafficFacilities}}</p></li>
	        </ul>
	    </div>
	    <div class="basicinfo">
	        <p>详细信息</p>
	        <ul>
	            <li>
	                <span style="width: 500px;">*面积：{{lookData.area}}㎡</span>
	                <span>*租金：{{lookData.rent}}元/月</span>
	            </li>
	            <li>
	                <span style="width: 500px;">*单价：{{lookData.unitPrice}}元/㎡</span>
	                <span v-if="lookData.transferFee != undefined">转让费：{{lookData.transferFee}}元</span>
	                <span v-else>转让费：{{lookData.transferFee}}</span>
	            </li>
	            <li>
	                <span style="width: 500px;">*支付方式：{{lookData.paymentWay}}</span>
	                <span>*楼层：{{lookData.currentFloor}}/{{lookData.totalFloor}}</span>
	            </li>
	            <li>
	                <span style="width: 500px;">*装修：{{lookData.decorate}}</span>
	                <span>*产权：{{lookData.property}}</span>
	            </li>
	            <li>
	                <span style="width: 500px;">*最长租期：{{lookData.maxLease}}</span>
	                <span>*是否分割：{{lookData.segmentation}}</span>
	            </li>
	            <li>*当前状态：{{lookData.currentStatus}}</li>
	            <li>*适合营业：<span v-for="item in operations" style="margin-right: 15px;">{{item}}</span></li>
	            <li>*标题：{{lookData.title}}</li>
	            <li>*房源亮点：<p>{{lookData.houseEdge}}</p></li>
	        </ul>
	    </div>
	    <div class="basicinfo">
	        <p>关联信息</p>
	        <ul>
	            <li>*配套设施：<span v-for="item in lookData.labels" style="margin-right: 15px;">{{item.labelName}}</span></li>
	            <li>
	                *图片{{images.length}}：
	                <div class="img-wrrap">
	                	<img v-if="images.length>5" src="./jtl02.png" height="41" width="41" alt="" class="arrow arrow-left" @click="moveLeft">
	                	<div class="parentBox" >
	                		<div style="position:absolute;left:0;transition: all 0.3s ease-out;" ref="parentBox" :style="{width:images.length*150+'px'}">
	                			<viewer :images="images" class="imagebox" :style="{width:images.length*150+'px'}">
									<div v-for="(src,index) in images" class="item-img">
										<img :src="src.url" :key="index" alt="" class="img" />
										<span>{{src.index}}</span>
									</div>
								</viewer>
	                		</div>
	                	</div>
						<img v-if="images.length>5" src="./jtr02.png" height="41" width="41" alt="" class="arrow arrow-right" @click="moveRight">
	                </div>
	            </li>
	            <li >
	                *绑定人员：{{broker.showText}}
	            </li>
	        </ul>
	    </div>
	</div>
</template>

<script>
	export default{
		name:"lookshop",
		data(){
			return {
				id:this.$route.query.id,
				lookData:[],
		        operations:[],
		        broker:{},
		        images:[],
		        index:0
			}
		},
		methods:{
			laodData(){
				let formData=new FormData();
				formData.set("id",this.id);
				this.$axios.post(`/tenement/shops/selectDetailById`,formData).then((res)=>{
		            this.lookData=res;
                    this.operations=res.operation.split(",");
                    this.broker=res.broker;
                    this.images=JSON.parse(res.images);
		        });
			},
			moveLeft(){
				if(this.index==this.images.length-5){
					this.$refs.parentBox.style.left=0+"px"
					this.index=0
				}else{
					this.index++;
					this.$refs.parentBox.style.left=(-this.index*150)+"px"
				}
			},
			moveRight(){
				if(this.index==0){
					this.$refs.parentBox.style.left=0+"px"
					this.index=this.images.length-5
				}else{
					this.index--;
					this.$refs.parentBox.style.left=(-this.index*150)+"px"
				}
			}
		},
		created(){},
		mounted(){
			this.laodData();
		}
	}
</script>

<style lang="stylus">
	.lookshop{
		font-size:14px;
		.basicinfo{
			margin-top: 15px;
		}
        .basicinfo>p{
        	border-bottom: 1px solid #ccc;
        }
        .basicinfo li{
        	margin: 15px;
        }
        .basicinfo li span{
        	display: inline-block
        }
        .basicinfo li p{
        	text-indent: 30px;
        }
        .img-wrrap{
        	width:750px;
        	position:relative;
        	margin-left:30px;
        	.arrow{
        		position:absolute;
        		top:50%;
        		transform:translateY(-50%);
        		cursor:pointer;
        	}
        	.arrow-left{
        		left:-45px;
        	}
        	.arrow-right{
        		right:-45px;
        	}
        	.parentBox{
        		width:750px;
        		height:170px;
        		overflow:hidden;
        		position:relative;
        	}
        }
        .imagebox{
        	.item-img{
        		width:148px;
        		height:148px;
        		border: 1px dashed #c0ccda;
        		cursor:pointer;
        		border-radius:6px;
        		text-align:center;
        		float:left;
        		.img{
        			width:100%;
        			height:100%;
        		}
        	}
        }
	}
</style>

